<template>
  <el-dropdown
    trigger="click"
    style="float: left;"
    @command="handleOpen"
  >
    <span class="el-dropdown-link">
      <div class="component-icon-btn">
        <div class="component-icon-btn-icon" style="line-height: 16px;float: left;">
          <i class="icons icons-16 icons-16-picture" />
        </div>
        <div style="width: 10px;height: 24px;float: left;position: relative;">
          <div class="right-btn" />
        </div>
      </div>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="float-image">
        <svg style="vertical-align: text-bottom;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><path d="M1 .5a.5.5 0 00-.5.5v11a.5.5 0 00.5.5h12a.5.5 0 00.5-.5V1a.5.5 0 00-.5-.5H1zM.5.5h13v12H.5V.5z" stroke="#3D4757" /><circle fill="#3D4757" fill-rule="nonzero" cx="10" cy="4" r="1" /><path d="M8.473 11.223L4.47 7.107 1 10.667v-1.5C2.715 7.6 3.707 6.664 3.975 6.358c.402-.457.651-.39 1.042 0L8.473 10l2.486-2.651c.414-.462.62-.462 1.011-.071L14 10.06v1.5l-2.51-3.41-3.017 3.072z" fill="#3D4757" /></g></svg>
        浮动图片
      </el-dropdown-item>
      <el-dropdown-item command="cell-image">
        <svg style="vertical-align: text-bottom;" xmlns="http://www.w3.org/2000/svg" width="16" height="16"><g fill="none" fill-rule="evenodd"><rect stroke="#3D4757" x="1.5" y="1.5" width="13" height="13" rx="1" /><path fill="#3D4757" d="M2 5h12v1H2z" /><path d="M14.7 11.814l-2.601-2.48a.5.5 0 00-.697.007l-2.367 2.34-1.698-1.62a.5.5 0 00-.724.036L5.3 11.626l.629.703 1.087-1.265L9.046 13l2.712-2.681 2.378 2.267.564-.772zM9 9a1 1 0 100-2 1 1 0 000 2z" fill="#3D4757" fill-rule="nonzero" /><path fill="#3D4757" d="M6 2v13H5V2z" /></g></svg>
        单元格图片
      </el-dropdown-item>
    </el-dropdown-menu>
    <el-dialog
      title="浮动图片"
      :visible.sync="dialogVisible"
      append-to-body
      :close-on-click-modal="false"
      width="600px"
    >
      <el-form class="div-block-clearance" label-position="left" :model="form" size="mini" label-width="90px" style="height: 240px;">
        <el-form-item label="">
          <el-checkbox-group v-model="form.type">
            <el-checkbox :label="true">只展示第一页图片</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-if="form.source==='text'" label="图片地址:">
          <el-input v-model="form.path" type="textarea" :rows="8" />
        </el-form-item>
        <el-form-item label="">
          <el-upload
            action="#"
            :show-file-list="false"
            :accept="'.png,.jpg'"
            :http-request="uploadFn"
            :on-change="getFile"
          >
            <el-button slot="trigger">选择本地图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleFloatImage">确 定</el-button>
      </span>
    </el-dialog>
  </el-dropdown>
</template>
<script>

import { undoManager } from '../Utils.js'

export default {
  props: {
    context: {
      type: Object,
      required: true
    }
  },
  data: function() {
    return {
      dialogVisible: false,
      imageUrl: '',
      sourceOptions: [
        { label: 'URL', value: 'text' },
        { label: '上传图片', value: 'upload' }
      ],
      form: {
        type: false,
        source: 'text',
        path: ''
      }
    }
  },
  mounted: function() {
    window.removeFloatImage = this.removeFloatImage
  },
  methods: {
    getFile(file, fileList) {
      this.getBase64(file.raw).then(res => {
        this.form.path = res
        this.cellDef.value.value = res
      })
    },
    getBase64(file) {
      return new Promise(function(resolve, reject) {
        const reader = new FileReader()
        let imgResult = ''
        reader.readAsDataURL(file)
        reader.onload = function() {
          imgResult = reader.result
        }
        reader.onerror = function(error) {
          reject(error)
        }
        reader.onloadend = function() {
          resolve(imgResult)
        }
      })
    },
    uploadFn() {

    },
    handleOpen(command) {
      if (command === 'float-image') {
        this.dialogVisible = true
        // this.handleFloatImage()
      } else if (command === 'cell-image') {
        this.handleCellImage()
      }
    },
    removeFloatImage(ele) {
      const parentElement = ele.parentNode
      parentElement.parentNode.removeChild(parentElement)
    },
    handleFloatImage() {
      let value = ''
      if (this.form.source === 'text') {
        if (!this.form.path) {
          this.$message('请选择图片')
          return
        }
        value = this.form.path
      }
      if (this.form.source === 'upload') {
        if (!this.imageUrl) {
          this.$message('请选择图片')
          return
        }
        value = this.imageUrl
      }
      const block = document.getElementById('float_image_block')
      var box = document.createElement('div')
      box.className = 'float-image-box'
      if (this.form.type) {
        box.setAttribute('data-target-type', 'true')
      } else {
        box.setAttribute('data-target-type', 'false')
      }
      box.setAttribute('data-target-source', this.form.source)
      box.innerHTML = `<span class="r"></span><span class="l"></span><span class="t"></span><span class="b"></span><span class="br"></span><span class="bl"></span><span class="tr"></span><span class="tl"></span><img class="drag" src="${value}"><div class="float-image-toolbar" onclick="removeFloatImage(this)"><i class="el-icon-close"></i></div>`
      block.appendChild(box)
      box.oncontextmenu = function(e) {
        e.stopPropagation()
        return false
      }
      this.resizeable(box)
      this.draggable(box)
      this.dialogVisible = false
    },
    handleCellImage() {
      const context = this.context
      const hot = this.context.hot
      const selected = hot.getSelected()
      if (selected) {
        const rowIndex = selected[0]
        const colIndex = selected[1]
        const row2Index = selected[2]
        const col2Index = selected[3]
        const cellDef = this.context.getCell(rowIndex, colIndex)
        if (!cellDef) {
          return
        }
        if (cellDef.value.type !== 'image') {
          const oldCellDataValue = cellDef.value
          const oldExpand = cellDef.expand
          const td = this.context.hot.getCell(rowIndex, colIndex)
          const width = this._buildWidth(colIndex, td.colSpan, this.context.hot)
          const height = this._buildHeight(rowIndex, td.rowSpan, this.context.hot)
          const newCellDataValue = {
            width,
            height,
            type: 'image',
            source: 'text'
          }
          cellDef.value = newCellDataValue
          cellDef.expand = 'None'
          this.context.hot.setDataAtCell(rowIndex, colIndex, '')
          this.context.hot.render()
          context.refreshSelected()

          undoManager.add({
            redo: function() {
              cellDef.value = newCellDataValue
              cellDef.expand = 'None'
              hot.setDataAtCell(rowIndex, colIndex, '')
              context.refreshSelected()
            },
            undo: function() {
              cellDef.value = oldCellDataValue
              cellDef.expand = oldExpand
              hot.setDataAtCell(rowIndex, colIndex, '')
              context.refreshSelected()
            }
          })
        }
      }
    },
    _buildWidth(colIndex, colspan, hot) {
      let width = hot.getColWidth(colIndex) - 3
      if (!colspan || colspan < 2) {
        return width
      }
      const start = colIndex + 1
      const end = colIndex + colspan
      for (let i = start; i < end; i++) {
        width += hot.getColWidth(i)
      }
      return width
    },
    _buildHeight(rowIndex, rowspan, hot) {
      let height = hot.getRowHeight(rowIndex) - 3
      if (!rowspan || rowspan < 2) {
        return height
      }
      const start = rowIndex + 1
      const end = rowIndex + rowspan
      for (let i = start; i < end; i++) {
        height += hot.getRowHeight(i)
      }
      return height
    },
    resizeable(ele) {
    	var oDiv = ele
    	oDiv.style.width = '500px'
    	var aSpan = oDiv.getElementsByTagName('span')
    	for (var i = 0; i < aSpan.length; i++) {
    	  const obj = aSpan[i]
    		obj.onmousedown = function(ev) {
    		  var oEv = ev || event
    			oEv.preventDefault()
          var oldWidth = oDiv.offsetWidth
          var oldHeight = oDiv.offsetHeight
          var oldX = oEv.clientX
          var oldY = oEv.clientY
          var oldLeft = oDiv.offsetLeft
          var oldTop = oDiv.offsetTop
          document.onmousemove = function(ev) {
            var oEv = ev || event
            if (obj.className == 'tl') {
              oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px'
              oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px'
              oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px'
              oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px'
            } else if (obj.className == 'bl') {
              oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px'
              oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px'
              oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px'
              oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px'
            } else if (obj.className == 'tr') {
              oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px'
              oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px'
              oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px'
              oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px'
            } else if (obj.className == 'br') {
              oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px'
              oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px'
              oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px'
              oDiv.style.bottom = oldTop + (oEv.clientY + oldY) + 'px'
            } else if (obj.className == 't') {
              oDiv.style.height = oldHeight - (oEv.clientY - oldY) + 'px'
              oDiv.style.top = oldTop + (oEv.clientY - oldY) + 'px'
            } else if (obj.className == 'b') {
              oDiv.style.height = oldHeight + (oEv.clientY - oldY) + 'px'
              oDiv.style.bottom = oldTop - (oEv.clientY + oldY) + 'px'
            } else if (obj.className == 'l') {
              oDiv.style.height = oldHeight + 'px'
              oDiv.style.width = oldWidth - (oEv.clientX - oldX) + 'px'
              oDiv.style.left = oldLeft + (oEv.clientX - oldX) + 'px'
            } else if (obj.className == 'r') {
              oDiv.style.height = oldHeight + 'px'
              oDiv.style.width = oldWidth + (oEv.clientX - oldX) + 'px'
              oDiv.style.right = oldLeft - (oEv.clientX - oldX) + 'px'
            }
          }
          document.onmouseup = function() {
            document.onmousemove = null
          }
          return false
    		}
    	}
    },
    draggable(ele) {
      const dialogHeaderEl = ele.querySelector('.drag')
      const dragDom = ele
      const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
      dialogHeaderEl.onmousedown = (e) => {
    	e.preventDefault()
        // 鼠标按下，计算当前元素距离可视区的距离
        const disX = e.clientX - dialogHeaderEl.offsetLeft
        const disY = e.clientY - dialogHeaderEl.offsetTop
        // 获取到的值带px 正则匹配替换
        let styL, styT
        // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
        if (sty.left.includes('%')) {
          styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
          styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
        } else {
          styL = +sty.left.replace(/\px/g, '')
          styT = +sty.top.replace(/\px/g, '')
        }
        document.onmousemove = function(e) {
          // 通过事件委托，计算移动的距离
          const l = e.clientX - disX
          const t = e.clientY - disY
          // 移动当前元素
          dragDom.style.left = `${l + styL}px`
          dragDom.style.top = `${t + styT}px`
          // 将此时的位置传出去
          // binding.value({x:e.pageX,y:e.pageY})
        }
        document.onmouseup = function(e) {
          document.onmousemove = null
          document.onmouseup = null
        }
      }
    }
  }
}
</script>
